<template>
  <div>
    <div class="ibox-content no-border">
      <div style="font-weight: bold">编辑{{editForm.app_name}}产品</div>
    </div>
    <div class="ibox-content">
      <el-button @click="saveEditForm('editForm')" size="small" type="primary" plain icon="el-icon-folder">保存
      </el-button>
      <el-button @click="goBack" size="small" type="primary" plain icon="el-icon-back">返回列表</el-button>
    </div>
    <div class="ibox-content">
      <el-form :model="editForm" :rules="editFormRules" ref="editForm" class="elForm" size="small">
        <el-row>
          <el-col :span="12" class="elCol">
            <el-form-item prop="app_type" label="类型">
              <br>
              <el-select style="width: 100%" v-model="editForm.app_type" placeholder="选择类型">
                <el-option label="全部" value=""></el-option>
                <el-option :label="item" :value="key" :key="index"
                           v-for="(item,key,index) in appProductOptions.app_type"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="elCol">
            <el-form-item prop="app_icon" label="APP图标">
              <br>
              <el-upload
                      class="avatar-uploader"
                      :action="upLoadUrl"
                      :show-file-list="false"
                      name="app_icon_file"
                      :on-success="handleAvatarSuccess"
                      :before-upload="beforeAvatarUpload">
                <img v-if="appIconUrl" :src="appIconUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" class="elCol">
            <el-form-item prop="app_name" label="App名称">
              <el-input v-model="editForm.app_name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="elCol">
            <el-form-item prop="app_pinyin_name" label="App拼音名称">
              <el-input v-model="editForm.app_pinyin_name"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" class="elCol">
            <el-form-item prop="is_pre_reg" label="预注册">
              <br>
              <el-select style="width: 100%" v-model="editForm.is_pre_reg" placeholder="请选择">
                <el-option :label="item" :value="key" :key="index"
                           v-for="(item,key,index) in appProductOptions.pre_reg"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col v-if="editForm.is_pre_reg==0 || editForm.is_pre_reg==''" :span="12" class="elCol">
            <el-form-item prop="app_link" label="推广链接">
              <el-input v-model="editForm.app_link"></el-input>
            </el-form-item>
          </el-col>
          <el-col v-if="editForm.is_pre_reg==1" :span="12" class="elCol">
            <el-form-item prop="third_channel" label="产品方渠道标识">
              <el-input v-model="editForm.third_channel"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row v-if="editForm.is_pre_reg==1">
          <el-col :span="12" class="elCol">
            <el-form-item prop="third_reg_url" label=" 预注册API地址">
              <el-input v-model="editForm.third_reg_url"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="elCol">
            <el-form-item prop="third_app_download" label="产品下载地址">
              <el-input v-model="editForm.third_app_download"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12" class="elCol">
            <el-form-item prop="final_type" label="结算方式">
              <br>
              <el-select style="width: 100%" v-model="editForm.final_type" placeholder="请选择">
                <el-option :label="item" :value="parseInt(key)" :key="index"
                           v-for="(item,key,index) in appProductOptions.final_type"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="elCol">
            <el-form-item prop="settlement_price" label="结算单价">
              <el-input v-model="editForm.settlement_price"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="editForm.final_type==2">
          <el-col :span="12" class="elCol">
            <el-form-item prop="is_reduce_interest" label="减息卡">
              <br>
              <el-radio-group v-model="editForm.is_reduce_interest">
                <el-radio :label="key" :value="key" :key="index"
                          v-for="(item,key,index) in appProductOptions.reduce_interest">{{item}}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="elCol">
            <el-form-item prop="is_exp_vip" label="体验会员">
              <br>
              <el-radio-group v-model="editForm.is_exp_vip">
                <el-radio :label="key" :value="key" :key="index"
                          v-for="(item,key,index) in appProductOptions.exp_vip">{{item}}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="hr-line-dashed"></div>
        <el-row>
          <el-col :span="12" class="elCol">
            <el-form-item prop="is_threshold_low" label="门槛">
              <br>
              <el-radio-group v-model="editForm.is_threshold_low">
                <el-radio :label="key" :value="key" :key="index"
                          v-for="(item,key,index) in appProductOptions.threshold_low">{{item}}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="elCol">
            <el-form-item prop="is_lending_fast" label="放款速度">
              <br>
              <el-radio-group v-model="editForm.is_lending_fast">
                <el-radio :label="key" :value="key" :key="index"
                          v-for="(item,key,index) in appProductOptions.lending_fast">{{item}}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" class="elCol">
            <el-form-item prop="loan_rate" label="效率下呗日利率">
              <el-input v-model="editForm.loan_rate"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="elCol">

          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" class="elCol">
            <el-form-item prop="min_loan_rate" label="新版最小贷款利率(单位:%)">
              <el-input v-model="editForm.min_loan_rate"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="elCol">
            <el-form-item prop="max_loan_rate" label="新版最大贷款利率(单位:%)">
              <el-input v-model="editForm.max_loan_rate"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" class="elCol">
            <el-form-item prop="max_loan_amount" label="最小贷款金额">
              <el-input v-model="editForm.min_loan_amount"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="elCol">
            <el-form-item prop="app_type" label="最大贷款金额">
              <el-input v-model="editForm.max_loan_amount"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" class="elCol">
            <el-form-item prop="min_loan_day" label="最短贷款天数">
              <el-input v-model="editForm.min_loan_day"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="elCol">
            <el-form-item prop="max_loan_day" label="最长贷款天数">
              <el-input v-model="editForm.max_loan_day"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" class="elCol">
            <el-form-item prop="app_tags" label="产品特点">
              <el-select style="width: 100%" multiple v-model="editForm.app_tags" placeholder="请选择">
                <el-option :label="item.text" :value="parseInt(item.val)" :key="index"
                           v-for="(item,key,index) in tagOptions"></el-option>
              </el-select>
              <br>
              <el-button @click="addTagFormVisible=true" style="margin-top: 10px" type="primary" icon="el-icon-plus">
                添加特点
              </el-button>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="elCol">
            <el-form-item label="排序">
              <el-input v-model="editForm.sort"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" class="elCol" style="padding:0">
            <el-form-item prop="apply_condition" label="详情">
              <el-input v-model="editForm.apply_condition"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" class="elCol">
            <el-form-item label="公司名称">
              <el-input v-model="editForm.company_name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="elCol">
            <el-form-item label="app广告语">
              <el-input v-model="editForm.app_slogan"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div class="ibox-content">
        <el-button @click="saveEditForm('editForm')" size="small" type="primary" plain icon="el-icon-folder">保存
        </el-button>
        <el-button @click="goBack" size="small" type="primary" plain icon="el-icon-back">返回列表</el-button>
      </div>

    </div>

    <!-- 添加标签 -->
    <el-dialog width="24%" title="添加标签" :visible.sync="addTagFormVisible" @close="closeDialog"
               :close-on-click-modal="false">
      <el-form :rules="addTagFormRule" :model="addTagForm" ref="addTagForm" size="small">
        <el-form-item prop="tag" label="标签名称">
          <el-input v-model="addTagForm.tag" placeholder="请输入标签名称"></el-input>
        </el-form-item>
        <el-form-item label="背景色">
          <el-input v-model="addTagForm.bg_color" placeholder="请输入背景色的16进制编码"></el-input>
        </el-form-item>
        <el-form-item label="文字颜色">
          <el-input v-model="addTagForm.font_color" placeholder="请输入文字颜色的16进制编码"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="closeDialog" size="small">关闭</el-button>
        <el-button type="primary" @click.native="addTagFormSave('addTagForm')" size="small">保存</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import {
    appProductDetails,
    appProductOptions,
    getTagOptionsList,
    saveTag,
    uplaodUrl,
    appProdctUpdate
  } from "../../api/product";

  let imgUrl = process.env.VUE_APP_IMG_URL;
  export default {
    name: "EditProduct",
    data() {
      return {
        appName: '',
        appId: '',
        editForm: {
          is_exp_vip: 0,
          app_icon_image: {
            src: ''
          }
        },
        appIconUrl: '',
        appProductOptions: {},
        tagOptions: [],
        addTagForm: {},
        addTagFormVisible: false,
        editFormRules: {
          app_type: [
            {required: true, message: '不能为空', trigger: 'blur'}
          ],
          app_name: [
            {required: true, message: '不能为空', trigger: 'blur'}
          ],
          app_pinyin_name: [
            {required: true, message: '不能为空', trigger: 'change'}
          ],
          is_pre_reg: [
            {required: true, message: '不能为空', trigger: 'blur'}
          ],
          app_link: [
            {required: true, message: '不能为空', trigger: 'blur'}
          ],
          final_type: [
            {required: true, message: '不能为空', trigger: 'change'}
          ],
          settlement_price: [
            {required: true, message: '不能为空', trigger: 'blur'}
          ],
          is_threshold_low: [{required: true, message: '不能为空', trigger: 'blur'}],
          is_lending_fast: [{required: true, message: '不能为空', trigger: 'blur'}],
          loan_rate: [{required: true, message: '不能为空', trigger: 'blur'}],
          min_loan_rate: [{required: true, message: '不能为空', trigger: 'blur'}],
          max_loan_rate: [{required: true, message: '不能为空', trigger: 'blur'}],
          min_loan_amount: [{required: true, message: '不能为空', trigger: 'blur'}],
          max_loan_amount: [{required: true, message: '不能为空', trigger: 'blur'}],
          min_loan_day: [{required: true, message: '不能为空', trigger: 'blur'}],
          max_loan_day: [{required: true, message: '不能为空', trigger: 'blur'}],
          app_tags: [{required: true, message: '请选择', trigger: 'blur'}],
          apply_condition: [{required: true, message: '不能为空', trigger: 'blur'}],
          third_channel: [{required: true, message: '不能为空'}],
          third_reg_url: [{required: true, message: '不能为空'}],
          third_app_download: [{required: true, message: '不能为空'}],
          is_reduce_interest: [{required: true, message: '不能为空'}],
          is_exp_vip: [{required: true, message: '不能为空'}],
        },
        addTagFormRule: {
          tag: [
            {required: true, message: '请输入标签名称'}
          ],
        },
        upLoadUrl: uplaodUrl
      }
    },
    created() {

    },
    mounted() {

    },
    activated() {
      this.appId = this.$route.query.appid;
      this.getAppProductOptions();
      this.getAppProductDetails();
      this.getTagOptionsList();
    },
    methods: {
      saveEditForm(form) {
        this.$refs[form].validate(valid => {
          if (valid) {
            appProdctUpdate({
              id: this.appId,
              ...this.editForm,
            }).then(res => {
              this.$message.success(res.msg);
              setTimeout(() => {
                this.$router.back();
              }, 1000)
            }).catch(() => {

            })

          }
        })
      },
      handleAvatarSuccess(data) {
        console.log(data.data);
        this.editForm.app_icon_code = data.data.data_code;
        this.editForm.app_icon_image.src = imgUrl + data.data.file;
        this.appIconUrl = imgUrl + data.data.file;
        console.log(this.editForm.app_icon_image.src);
        this.editForm.app_icon_image.name = '';
        this.editForm.app_icon_image.picture_size = ''
      },
      beforeAvatarUpload() {
      },
      getAppProductDetails() {
        appProductDetails({
          id: this.appId
        }).then(res => {
          this.editForm = res.data;
          console.log(this.editForm.app_icon_image);
          if (!this.editForm.app_icon_image) {
            this.editForm.app_icon_image = {}
          }
          console.log(this.editForm.is_exp_vip);
          this.editForm.is_exp_vip = Number(this.editForm.is_exp_vip);
          this.editForm.is_reduce_interest = Number(this.editForm.is_reduce_interest);
          this.appIconUrl = this.editForm.app_icon_image.src
        })
      },
      getAppProductOptions() {
        appProductOptions({}).then(res => {
          this.appProductOptions = res.data;
        }).catch(() => {

        })
      },
      getTagOptionsList() {
        getTagOptionsList({}).then(res => {
          this.tagOptions = res.data;
        }).catch(() => {

        })
      },
      closeDialog() {
        this.addTagFormVisible = false;
        this.$refs['addTagForm'].clearValidate();
      },
      addTagFormSave(form) {
        this.$refs[form].validate(valid => {
          if (valid) {
            saveTag({
              ...this.addTagForm
            }).then(res => {
              this.addTagFormVisible = false;
              this.getTagOptionsList();
              this.$message.success(res.msg);
            }).catch(() => {
            })
          }
        })
      },
      goBack() {
        this.$confirm(`确定要放弃编辑${this.editForm.app_name}产品吗`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          this.$router.push({name: 'AppProduct'})
        }).catch(() => {

        })
      },
    }
  }
</script>

<style>
  .avatar-uploader {
    height: 70px;
    margin-bottom: 10px;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }


  i.avatar-uploader-icon::after {
    position: absolute;
    width: 100%;
    height: 18px;
    line-height: 18px;
    left: 0;
    bottom: 0;
    font-size: 12px;
    color: #fff;
    content: '上传图标';
    background: rgba(0, 0, 0, .2);
  }

  .avatar-uploader-icon {
    position: relative;
    font-size: 28px;
    color: #8c939d;
    width: 68px;
    height: 68px;
    line-height: 68px;
    text-align: center;
  }

  .avatar {
    width: 68px;
    height: 68px;
    display: block;
  }
</style>

<style scoped lang="scss">
  .elForm {
    .elCol {
      &:nth-child(2n-1) {
        padding-right: 20px;
      }

      &:nth-child(2n) {
        padding-left: 20px;
      }
    }
  }
</style>
